<template>
  <div class="app">
    <section>
      <router-view />
    </section>
    <footer>
      <ul>
        <!-- <li v-for="item in footList" :key="item">{{item}}</li> -->
        <li>
          <router-link to="/home/move">电影/影院</router-link>
        </li>
        <li>
          <router-link to="/home/video1">视频</router-link>
        </li>
        <li>
           <router-link to="/home/video2">小视频</router-link>
        </li>
        <li>
           <router-link to="/home/show">演出</router-link>
        </li>
        <li>
          <router-link to="/home/main">我的</router-link>
        </li>
      </ul>
    </footer>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      list: []
      // footList: ['电影/影院', '视频', '小视频', '演出', '我的']
    }
  },
  mounted () {
    axios.post('/datalist').then(res => {
      // console.log(res.data.movieList)
      this.list = res.data.movieList
    })
  }
}
</script>
<style lang="less" >
.app a{
    text-decoration: none;
    color: #000;
}
header{
  width: 100%;
  height: 100px;
  background: #e54847;
  h4{
      height: 50px;
      text-align: center;
      line-height: 50px;
      color: #fff;
  }
  nav{
      background: #ccc;
      display: flex;
      line-height: 50px;
      .left{
          width: 50px;
          padding-left: 5px;
      }
      .cen{
          flex: 1;
          display: flex;
          align-items: center;
          text-align: center;
          P{
              flex: 1;
          }
      }
  }
}
section{
  flex: 1;
  overflow: auto;
  overflow-y: auto;
  .left{
      width: 100px;
      height: 100%;
      img{
          width: 100%;
          height: 100%;
      }
  }
  .ite{
      padding: 10px;
      display: flex;
  }
  .right{
      padding-left: 10px;
      line-height: 30px;
  }
}
footer{
  width: 100%;
  height: 60px;
  // color: #fff;
  ul{
      display: flex;
      align-items: center;
      height: 100%;
      border-top: 2px solid #ccc;
      li{
          flex: 1;
          text-align: center;
          width: 100%;
          height: 100%;
          line-height: 60px;
          cursor: pointer;
      }
      a{
        display: block;
        padding-right: 10px;
        color: #333;
        font-size: 16px;
        &.router-link-active{
          color:tomato;
        }
      }
  }
}
</style>
